<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" id="container-svg"></svg>
    <script>
        const data=[
            {name:'questions',value:17},
            {name:'schools',value:25},
            {name:'philosophers',value:35}
        ]
        const chartWidth=480
        const chartHeight=300
        const margin=15
        const containerWidth=chartWidth+margin*2
        const containerHeight=chartHeight+margin*2
        
        const names=Array.from(data,d=>d.name)
        const values=Array.from(data,d=>d.value)
        const indices=Array.from(data,(_,i)=>i)

        const step=chartWidth / names.length
        const barWidth=step * 0.8
        const xs = Array.from(indices,i=>i*step)

        const y=chartHeight;
        const vmax=Math.max(...values)
        const barHeights=Array.from(values,v=>chartHeight*(v/vmax))

        const nameColor={
            questions:'#5b8ff9',
            schools:'#61ddaa',
            philosophers:'#65789b'
        }

        const colors=Array.from(names,name=>nameColor[name])

        function createSVGElement(type){
            // 创建一个命名空间内部的标签
            return document.createElementNS('http://www.w3.org/2000/svg',type)
        }

        const svg=document.getElementById('container-svg')
        svg.setAttribute('width',containerWidth)
        svg.setAttribute('height',containerHeight)
        svg.setAttribute('viewBox',[0,0,containerWidth,containerHeight])

        const g=createSVGElement('g')
        g.setAttribute('transfrom',`translate(${margin},${margin})`)
        svg.appendChild(g)

        for(const index of indices){
            const color=colors[index]
            const x=xs[index]
            const barHeight=barHeights[index]
            const value=values[index]

            const rect=createSVGElement('rect')
            rect.setAttribute('x',x)
            rect.setAttribute('y',y-barHeight)
            rect.setAttribute('fill',color)
            rect.setAttribute('width',barWidth)
            rect.setAttribute('height',barHeight)
            g.appendChild(rect)

            const text=createSVGElement('text')
            text.textContent=value
            text.setAttribute('text-anchor','middle')
            text.setAttribute('fill','white')
            text.setAttribute('font-family','PingFangSc-Regular,sans-serif')
            text.setAttribute('font-size',25)
            text.setAttribute('alignment-baseline','middle')
            text.setAttribute('x',x+barWidth/2)
            text.setAttribute('y',y-barHeight/2)
            g.appendChild(text)
        }

    </script>
</body>
</html>